import resize from "../directives/resize";
import { withInstall } from "../utils/vue";

const Affix = {
  name: "Affix",
  directives: { resize },
  props: {
    offsetTop: { type: Number, default: 0 },
    offsetBottom: Number,
    target: {
      type: Function,
      default: () => {
        return window;
      },
    },
  },
  data() {
    return {
      fixed: false,
      width: 0,
      height: 0,
      offsetTopValue: 0,
    };
  },
  beforeDestroy() {
    if (this.target() == window) {
      window.removeEventListener("scroll", this.updatePosition);
    }
  },
  mounted() {
    let target = this.target();
    if (target && typeof window !== "undefined") {
      target.addEventListener("scroll", this.updatePosition);
    }
  },
  methods: {
    updatePosition() {
      let { offsetBottom, offsetTop, $refs } = this;
      let target = this.target();
      if (!$refs.blob || !target) return;

      let rect = $refs.blob.getBoundingClientRect();
      let container = target != window && target != document ? target.getBoundingClientRect() : { top: 0, bottom: document.documentElement.clientHeight };

      let hasbottom = typeof offsetBottom == "number" && offsetBottom >= 0;
      let fx = hasbottom ? container.bottom - rect.bottom >= offsetBottom : rect.top - container.top <= offsetTop;

      if (!fx) {
        this.offsetTopValue = rect.top;
        if (target == window || target == document) {
          if (this.offsetTopValue > offsetTop && !hasbottom) {
            this.offsetTopValue = offsetTop;
          }
          if (hasbottom && container.bottom - rect.bottom < offsetBottom) {
            this.offsetTopValue = container.bottom - offsetBottom - rect.height;
          }
        } else {
          //todo:
        }
      }
      if (this.fixed != fx) {
        this.fixed = fx;
        this.width = rect.width;
        this.height = rect.height;
        this.$emit("change", this.fixed);
      }
    },
  },
  render() {
    let blobStyle = null,
      fixedStyle = null,
      classes = null;
    if (this.fixed) {
      blobStyle = {
        width: `${this.width}px`,
        height: `${this.height}px`,
      };
      fixedStyle = {
        width: `${this.width}px`,
        height: `${this.height}px`,
        top: `${this.offsetTopValue}px`,
      };
      classes = { ["k-affix"]: this.fixed };
    }

    return (
      <div style={blobStyle} ref="blob" v-resize={this.updatePosition}>
        <div style={fixedStyle} class={classes}>
          {this.$slots.default}
        </div>
      </div>
    );
  },
};
export default withInstall(Affix)